<template name="zy-search">
	<view>
		<view class="search">
			<!-- #ifdef APP-PLUS -->
				<image src="../../static/zy-search/voice.svg" mode="aspectFit" @click="startRecognize()" class="voice-icon"></image>
			<!-- #endif -->
			<template>
				<input maxlength="20" type="text" value="" confirm-type="search" @confirm="searchStart()" placeholder="请输入学科名搜索" v-model.trim="searchText"/>
			</template>
			<image src="../../static/zy-search/search.svg" mode="aspectFit" @click="searchStart()" class="search-icon"></image>
		</view>
		<view :class="'s-' + theme" v-if="hList.length > 0">
<!-- 			<view class="header">
				历史记录
				<image src="../../static/zy-search/delete.svg" mode="aspectFit" @click="delhistory"></image>
			</view> -->
			<view class="list">
				<view v-for="(item,index) in hList" :key="index" @click="keywordsClick(item)">{{item}}</view>
			</view>
		</view>
		<view :class="'wanted-' + theme" v-if="showWant">
			<view class="header">学科列表</view>
			<view class="list">
				<view v-for="(item,index) in hotList" :key="index" @click="keywordsClick(item, index)">{{item}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		name:"zy-search",
		props:{
			theme:{	//选择块级显示还是圆形显示
				type: String,
				default: 'block'
			},
			showWant:{	//是否展示推荐菜单
				type: Boolean,
				default: false
			},
			speechEngine: { //语音引擎=>讯飞:iFly,百度:'baidu'
				type: String,
				default: 'baidu'
			}
		},
		data() {
			return {
				hotList: [],
				totalData: [],
				searchText:'',								//搜索关键词
				// hList:uni.getStorageSync('search_cache')		//历史记录
			};
		},
		mounted() {
			this.getSubjectList()
		},
		methods: {
			getSubjectList(){
				uni.showLoading({
					title: 'loading'
				});
				this.request({
					url: `${this.baseUrl}/user/categoryList`,
					data: {
						categoryName: this.searchText
					},
					method: 'GET',
					success: (res) => {
						this.totalData = res
						this.hotList = []
						for (let i = 0; i < res.length; i++) {
							this.hotList.push(res[i].categoryName)
						}
						uni.hideLoading()
					},
					fail: function(error) {
						console.log(error);
					}
				})
			},
			searchStart: function() {	//触发搜索
				let _this = this;
				console.log('搜索+++', _this.searchText)
				if (_this.searchText == '') {
					uni.showToast({
						title: '请输入关键字',
						icon: 'none',
						duration: 1000
					});
				}else{
					this.getSubjectList()
					// this.request({
					// 	url: `${this.baseUrl}/user/categoryList`,
					// 	data: {
					// 		categoryName: _this.searchText
					// 	},
					// 	method: 'GET',
					// 	success: (res) => {
					// 		this.totalData = res.list
					// 		for (let i = 0; i < res.list.length; i++) {
					// 			this.hotList.push(res.list[i].categoryName)
					// 		}
					// 		uni.hideLoading()
					// 	},
					// 	fail: function(error) {
					// 		console.log(error);
					// 	}
					// })
					// _this.$emit('getSearchText', _this.searchText);
					// uni.getStorage({
					// 	key:'search_cache',
					// 	success(res){
					// 		let list = res.data;
					// 		if(list.length > 5){
					// 			for(let item of list){
					// 				if(item == _this.searchText){
					// 					return;
					// 				}
					// 			}
					// 			list.pop();
					// 			list.unshift(_this.searchText);
					// 		}else{
					// 			for(let item of list){
					// 				if(item == _this.searchText){
					// 					return;
					// 				}
					// 			}
					// 			list.unshift(_this.searchText);
					// 		}
					// 		_this.hList = list;
					// 		uni.setStorage({
					// 			key: 'search_cache',
					// 			data: _this.hList
					// 		});
					// 	},
					// 	fail() {
					// 		_this.hList = [];
					// 		_this.hList.push(_this.searchText);
					// 		uni.setStorage({
					// 			key: 'search_cache',
					// 			data: _this.hList
					// 		});
					// 		// _this.$emit('getSearchText', _this.searchText);
					// 	}
					// })
					// this.goToPage(id)
				}
			},
			keywordsClick (item, index) {	//关键词搜索与历史搜索
				this.searchText = item
				this.goToPage(this.totalData[index].categoryId)
				// this.searchStart(this.totalData[index].categoryId)
			},
			// delhistory () {		//清空历史记录
			// 	this.hList = [];
			// 	uni.setStorage({
			// 		key: 'search_cache',
			// 		data: []
			// 	});
			// },
			startRecognize: function() {	//语音输入
				let _this = this;
				let options = {};
				options.engine = _this.speechEngine;
				options.punctuation = false; // 是否需要标点符号 
				options.timeout = 10 * 1000;
				plus.speech.startRecognize(options, function(s) {
					_this.searchText = _this.searchText + s;
				});
			},
			goToPage(id){
				uni.navigateTo({
					url: '/pages/views/searchList/index?categoryId=' + id
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.search{
		width: 640upx;
		margin: 0 auto;
		position: relative;
		input{
			background-color: #F7F7F7;
			padding: 10upx 44upx;
			font-size: 28upx;
			border-radius: 50upx;
		}
		.voice-icon{
			width: 36upx;
			height: 36upx;
			padding: 16upx 20upx 16upx 0;
			position: absolute;
			left: 16upx;
			top: 4upx;
			z-index: 10;
		}
		.search-icon{
			width: 36upx;
			height: 36upx;
			padding: 16upx 20upx 16upx 0;
			position: absolute;
			right: 0;
			top: -2upx;
			z-index: 10;
		}
	}
	.s-block{
		margin-top: 30upx;
		.header{
			font-size: 32upx;
			padding: 30upx;
			position: relative;
			image{
				width: 36upx;
				height: 36upx;
				padding: 10upx;
				position: absolute;
				right: 40upx;
				top: 24upx;
			}
		}
		.list{
			display: flex;
			flex-wrap: wrap;
			view{
				flex: 0 0 18%;
				border-radius: 20rpx;
				color: #8A8A8A;
				font-size: 28upx;
				box-sizing: border-box;
				text-align: center;
				padding: 20upx 0;
				border-top: 2upx solid #FFF;
    			border-left: 2upx solid #FFF;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				background-color: #F7F7F7;
				margin: 0 1%;
			}
		}
	}
	.s-circle{
		margin-top: 30upx;
		.header{
			font-size: 32upx;
			padding: 30upx;
			border-bottom: 2upx solid #F9F9F9;
			position: relative;
			image{
				width: 36upx;
				height: 36upx;
				padding: 10upx;
				position: absolute;
				right: 40upx;
				top: 24upx;
			}
		}
		.list{
			display: flex;
			flex-wrap: wrap;
			padding: 0 30upx 20upx;
			view{
				padding: 8upx 30upx;
				margin: 20upx 30upx 0 0;
				font-size: 28upx;
				color: #8A8A8A;
				background-color: #F7F7F7;
				box-sizing: border-box;
				text-align: center;
				border-radius: 20upx;
			}
		}
	}
	.wanted-block{
		margin-top: 30upx;
		.header{
			font-size: 32upx;
			padding: 30upx;
		}
		.list{
			display: flex;
			flex-wrap: wrap;
			view{
				flex: 0 0 29%;
				border-radius: 20rpx;
				color: #8A8A8A;
				font-size: 28upx;
				box-sizing: border-box;
				text-align: center;
				padding: 20upx 0;
				border-top: 2upx solid #FFF;
				border-left: 2upx solid #FFF;
				background-color: #F7F7F7;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				margin: 10rpx 1.67%;
			}
		}
	}
	.wanted-circle{
		margin-top: 30upx;
		.header{
			font-size: 32upx;
			padding: 30upx;
		}
		.list{
			display: flex;
			flex-wrap: wrap;
			padding: 0 30upx 20upx;
			view{
				padding: 8upx 30upx;
				margin: 20upx 30upx 0 0;
				font-size: 28upx;
				color: #8A8A8A;
				background-color: #F7F7F7;
				box-sizing: border-box;
				text-align: center;
				border-radius: 20upx;
			}
		}
	}
</style>
